import QtQuick
import QtQuick.Controls

Item{
    id: root
    property int img_width: 100
    property int img_height: 200
    property string back_img_path: ""
    property string btn_name: ""
    // 回调函数
    property var cbClicked: {}
    property var cbReleased: {}
    
    
    //anchors.fill: parent

    // 缩放动画效果
    Behavior on scale {
        NumberAnimation {
            duration: 150 // 动画时长
            easing.type: Easing.InOutQuad // 缓动效果
        }
    }

    Button{
        id: btn
        width: root.img_width
        height: root.img_width

        background: Rectangle {
            id: back_img
            border.color: "red"
            border.width: 2
            radius: 20
            color: "transparent"  
            //color: "black"  
            Image {
                anchors.fill: parent
                source:root.back_img_path  
                fillMode: Image.PreserveAspectFit
                opacity: btn.down ? 0.6 : 1
            }
        }
        // 处理按钮点击事件
        onClicked: {
            //缩放动画
            root.scale = 0.9
            Qt.callLater(() => root.scale = 1)

            root.handleButtonClick()
        }
        onReleased: {
            root.handleButtonReleased()
        }
    }

    function handleButtonClick() {
        console.log(root.btn_name + "_btn clicked")
        if(root.cbClicked != undefined){
            root.cbClicked();
        }
    }
    function handleButtonReleased() {
        //console.log(root.btn_name + "_btn released")
    }
}